<!DOCTYPE html>
<html class="ui-page-login">

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../UI/mui/css/mui.min.css" rel="stylesheet" />
<link href="../UI/mui/picker/css/mui.picker.min.css" rel="stylesheet" />

<style type="text/css">
.li-content {
	padding-left: 10px;
	padding-top: 10px;
	padding-right: 20px;
	width: 100%;
	font-size: 12px;
	word-wrap: break-word;
	white-space: normal;
	word-break: break-all;
}

.query-row{
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}

.query-row-title{
	color: white;
}
</style>
<script type="text/javascript" src="../UI/mui/js/mui.min.js"></script>
<script type="text/javascript" src="../UI/mui/picker/js/mui.picker.min.js"></script>
<script type="text/javascript" src="mui.enterfocus.js"></script>
</head>

<body>

	<!-- 侧滑导航根容器 -->
	<div class="mui-off-canvas-wrap mui-draggable">
		<!-- 主页面容器 -->
		<div class="mui-inner-wrap">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-right">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-row query-row">
							<font color="white" style="font-size: 20px; font-weight: bold;">筛选项</font>
						</div>
					    <div class="mui-row query-row">
					    	<div class="query-row-title">贷款ID：</div>
					    	<input id="loanId" class="mui-input-clear" type="text" placeholder="请输入贷款ID" />
						</div>						
					    <div class="mui-row query-row">
					    	<div class="query-row-title">贷款类型：</div>
					    	<input id="loanType" class="mui-input-clear" key="" value="" type="text" placeholder="请选择贷款类型" />
						</div>
					    <div class="mui-row query-row">
					    	<div class="query-row-title">贷款上报年月：</div>
					    	<input id="pickupTimeStart" class="mui-input-clear" key="" value="" type="text" placeholder="请选择起始时间" />
					    	<input id="pickupTimeEnd" class="mui-input-clear" key="" value="" type="text" placeholder="请选择结束时间" />
						</div>		
					    <div class="mui-row query-row">
					    	<div class="query-row-title">贷款状态：</div>
					    	<input id="processStat" class="mui-input-clear" key="" value="" type="text" placeholder="请选择贷款状态" />
						</div>	
					    <div class="mui-row query-row">
					    	<center><button id="submitBtn" type="button" class="mui-btn mui-btn-primary" >确认</button></center>
						</div>																								
					</div>
				</div>
			</aside>
			<!-- 主页面标题 -->
			<header class="mui-bar mui-bar-nav">
				<a id="backBtn"class="mui-action-menu mui-icon mui-icon-back"></a>
				<a id="queryBtn"
					class="mui-icon mui-action-menu mui-icon-search mui-pull-right"></a>
				<h1 class="mui-title">贷款申请情况查询</h1>
			</header>
			<!-- 主页面内容容器 -->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!-- 主界面具体展示内容 -->
					<ul class="mui-table-view"></ul>
				</div>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript">
	var queryURL = '../mobile/findByCondition.action'

	/**
	 * 初始化上拉组件
	 */
	mui.init({
		pullRefresh : {
			container : '#pullrefresh',
			up : {
				contentrefresh : '正在加载...',
				contentnomore : '没有更多数据了',
				callback : pullupRefresh
			}
		}
	});

	var nextPage = 0;
	var size = 6;
	var totalPage = 0;
	
	/**
	 * 上拉加载具体业务实现
	 */
	function pullupRefresh() {
		var count = 0;	

		setTimeout(function() {

			mui.ajax(queryURL, {
				data : {
					"loanId" : document.getElementById('loanId').value == undefined ? "" : document.getElementById('loanId').value, 
					"loanType" : document.getElementById('loanType').key == undefined ? "" : document.getElementById('loanType').key, 
					"processStat" : document.getElementById('processStat').key == undefined ? "" : document.getElementById('processStat').key, 
					"pickupTimeStart" : document.getElementById('pickupTimeStart').key == undefined ? "" : document.getElementById('pickupTimeStart').key, 
					"pickupTimeEnd" : document.getElementById('pickupTimeEnd').key == undefined ? "" : document.getElementById('pickupTimeEnd').key,
					"page" : nextPage,
					"size" : size
				},
				dataType : 'json',//服务器返回json格式数据
				type : 'post',//HTTP请求类型
				timeout : 5000,//超时时间设置为10秒；			
				success : function(data) {
					if (data.success == 'true') {
						fillData(data.data);
						//记录上一次访问的页数
						nextPage = nextPage + 1;
						totalPage = data.totalPage;

						//如果页数已经达到最大页，那么不再加载
						if (nextPage >= totalPage) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						}else{
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
						}

					} else {
						mui.alert(data.data);
					}
				}
			});

		}, 1500);
	}

	function fillData(listData) {
		var table = document.body.querySelector('.mui-table-view');
		console.log(listData)
		for (var i = 0; i < listData.length; i++) {
			var li = document.createElement('li');
			li.className = 'mui-table-view-cell';
			li.id = listData[i].loanId;
			li.addEventListener('tap', function(event) {
				//mui.alert(this.id);
				openRoadMap(this.id);
			});
			li.innerHTML = '<a class="mui-navigate-right"><b style="font-size:16px;"><img width="32" src="../UI/img/loan.png" align="center"/>&nbsp;'
					+ listData[i].loanIdCN
					+ '</b><div class="li-content">'
					+ listData[i].listDetil + '</div></a>';
			table.appendChild(li);
		}
	}

	mui.ready(function() {
		mui('#pullrefresh').pullRefresh().pullupLoading();
		
		var queryBtn = document.getElementById('queryBtn');

		queryBtn.addEventListener('tap', function(event) {
			mui('.mui-off-canvas-wrap').offCanvas().show();
		});
		
		var backBtn = document.getElementById('backBtn');

		backBtn.addEventListener('tap', function(event) {
			mui.openWindow({
        		url:'./login.html',
        		id:'main.html'
        	});
		});
		
		//初始化贷款类别
		var loanTypePicker = new mui.PopPicker();
		loanTypePicker.setData([{value:'1',text:'一手房贷款'},
			{value:'2',text:'二手房贷款'},
			{value:'3',text:'个人消费贷款'},
			{value:'4',text:'个人经营性贷款'},
			{value:'5',text:'农户小额信用贷款'},
			{value:'',text:'全部'}]); 
		
		var loanTypeText = document.getElementById('loanType');

		loanTypeText.addEventListener('tap', function(event) {
			loanTypePicker.show(function (selectItems) {
				document.getElementById('loanType').key = selectItems[0].value;
				document.getElementById('loanType').value = selectItems[0].text;
			  })
		});
		
		//初始化贷款上报日期
		var pickupTimeStartPicker = new mui.DtPicker({type:'date'});
		var pickupTimeStartText = document.getElementById('pickupTimeStart');

		pickupTimeStartText.addEventListener('tap', function(event) {
			pickupTimeStartPicker.show(function (selectItems) {
				document.getElementById('pickupTimeStart').key = selectItems.y.text + "-" + selectItems.m.text + '-' + selectItems.d.text;
				document.getElementById('pickupTimeStart').value = selectItems.y.text + "年" + selectItems.m.text + "月" + selectItems.d.text + "日";
			  })
		});
		
		var pickupTimeEndPicker = new mui.DtPicker({type:'date'});
		var pickupTimeEndText = document.getElementById('pickupTimeEnd');

		pickupTimeEndText.addEventListener('tap', function(event) {
			pickupTimeEndPicker.show(function (selectItems) {
				document.getElementById('pickupTimeEnd').key = selectItems.y.text + "-" + selectItems.m.text +  + selectItems.d.text;
				document.getElementById('pickupTimeEnd').value = selectItems.y.text + "年" + selectItems.m.text + "月" + selectItems.d.text + "日";
			  })
		});
		
		//初始化贷款状态
		var processStatPicker = new mui.PopPicker();
		processStatPicker.setData([{value:'',text:'全部'},
			{value:'WAIT',text:'等待上报'},
			{value:'SUBMIT',text:'已上报等待资料抵达联社'},
			{value:'ASSIGNED',text:'已分配独立审查人，等待审查'},
			{value:'EXAMINE_SUCC_LIANSHE',text:'审查成功，等待区联社审批'},
			{value:'EXAMINE_SUCC_GEJING',text:'审查成功，等待个金部经理审批'},
			{value:'EXAMINE_UPDATE',text:'审查失败，需要补件'},
			{value:'EXAMINE_FAIL',text:'审查失败，退件'},
			{value:'APPROVAL_SUCC_LIANSHE',text:'区联社审批成功'},
			{value:'APPROVAL_SUCC_GEJING',text:'个金部经理审批成功'},
			{value:'CAN_NOT_EXAMINE',text:'个金无权审查，由区联社审查并审批'},
			{value:'APPROVAL_FAIL',text:'区联社审批未通过'},
			{value:'APPROVAL_FAIL_GEJING',text:'个金部经理审批未通过'}]); 
		
		var processStatText = document.getElementById('processStat');

		processStatText.addEventListener('tap', function(event) {
			processStatPicker.show(function (selectItems) {
				document.getElementById('processStat').key = selectItems[0].value;
				document.getElementById('processStat').value = selectItems[0].text;
			  })
		});
		
		//提交按钮
		var submitBtn = document.getElementById('submitBtn');
		submitBtn.addEventListener('tap', function(event) {
			mui('.mui-off-canvas-wrap').offCanvas().close();
			var table = document.body.querySelector('.mui-table-view');
			table.innerHTML = '';
			nextPage = 0;
			mui('#pullrefresh').pullRefresh().pullupLoading();
		});
	});

	//打开RoadMap窗口
	function openRoadMap(loanID){
		mui.openWindow({  
		    url: 'roadMap.html?loanId=' + loanID,  
		    id: 'roadMap',  
		    /*styles: {  
		        top: newpage - top - position, //新页面顶部位置  
		        bottom: newage - bottom - position, //新页面底部位置  
		        width: newpage - width, //新页面宽度，默认为100%  
		        height: newpage - height, //新页面高度，默认为100%  
		        ......  
		    },*/  
		    show: {  
		        autoShow: true //页面loaded事件发生后自动显示，默认为true  		          
		    },  
		    waiting: {  
		        autoShow: true, //自动显示等待框，默认为true  
		        title: '正在加载...'
		    }  
		}) 
	}

</script>
</html>